/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div id="opa"
         ref="mainApp"
         :class="opaClsObj"
         class="mainApp">
        <app-nav ref="navComp"
                 :active-tab="activeTab" />
        <div id="body">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"
                             ref="viewComp" />
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"
                         ref="viewComp" />
            <!-- app-footer v-if="!isIndexScreen" /-->
        </div>
    </div>
</template>

<script lang=ts>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
// eslint-disable-next-line
// @ts-ignore
import AppNav from './home/mod_launch/nav';
import i18n from './common/lang';

@Component({
    components: {
        AppNav
    }
})
export default class App extends Vue {
    @Prop({
        type: String
    }) activeTab!: string
    @Prop({
        type: Boolean
    }) isShowWarn!: boolean

    isIndexScreen = true
    bodyHeight = 'calc(100vh - 60px)'
    get opaClsObj () {
        return {
            'lang-en': i18n.lang === 'en_US',
            'show-expiration-warning': this.isShowWarn
        };
    }

    // :class="{maintain: isIndexScreen}"
    @Watch('$route.path')
    pathChange () {
        let indexScreenList = [/^#\/index/i];
        let checkIsIndexScreen = () => !!indexScreenList.find((reg) => reg.test(window.location.hash));
        this.isIndexScreen = checkIsIndexScreen();
    }
    async created () {
        if (location.hash === '#/') {
            return this.$router.replace({
                path: `${this.activeTab}`
            });
        }
    }
}
</script>